import Taro, { Component } from '@tarojs/taro'
import {View, Input, Button, Picker} from '@tarojs/components'
import { AtModal, AtModalHeader, AtModalContent, AtModalAction, AtList, AtListItem } from 'taro-ui'
import moment from 'moment'
import {checkPwd, getEmployeeSalary, getEmployeeSalaryModule} from './service'
import './index.scss'
import {setAuthToken} from "../../actions/authToken";
import { connect } from '@tarojs/redux'

@connect(({ authToken }) => ({
  authToken
}), (dispatch) => ({
  setAuthToken (data) {
    dispatch(setAuthToken(data))
  },
}))
export default class salary extends Component {

  config = {
    navigationBarTitleText: '社保查询'
  };

  constructor (props) {
    super(props);
    this.state = {
      modalIsOpened: true,
      isPassVerification: false,
      date: moment(new Date()).format('YYYY'),
      towPassword: null,
      authToken: null,
    }
  }

  onTimeChange = e => {
    this.getListByYear(e.detail.value, this.props.authToken);
    this.setState({date: e.detail.value})
  };

  setTowPassword = e => {
    this.setState({towPassword: e.detail.value})
  };

  handleClose = () => {
    Taro.navigateBack().then()
  };

  handleConfirm = () => {
    let {towPassword, date} = this.state;
    checkPwd(towPassword).then(res => {
      if (res.flag){
        this.props.setAuthToken(res.data);
        this.setState({modalIsOpened: false, isPassVerification: true, authToken: res.data});
        // todo......


      }
    })
  };

  getListByYear = (date, authToken) => {
    this.setState({ loading: true })
    getEmployeeSalary({ yymm: `${date}-01`, endyymm: `${date}-12`, authToken }).then(salaryRes => {
      this.setState({ loading: false })
      if (salaryRes.flag) {
        this.setState({ employeeSalary: salaryRes.data })
      } else {
        Taro.showToast({
          title: `${salaryRes.error}`,
          icon: 'none',
          duration: 2000
        })
        this.props.setAuthToken('')
      }
    })
  }


  turnToDetail = (item) => {
    Taro.navigateTo({
      url: '/pages/socialSecurity/detail/index?detailData=' + JSON.stringify(item)
    });
  };

  render () {
    if (this.props.authToken){
      return (
        <View>
          {/*<View className='totalView main-bg' style='height: auto; flex-wrap: wrap; font-size:14pt'>*/}
          {/*  <View style={'padding: 5pt 15pt'}>参保地： {'南宁'}</View>*/}
          {/*  <View style={'padding: 5pt 15pt'}>参保单位： {'南宁某某公司'}</View>*/}
          {/*</View>*/}

          <View className='salaryTopBar'>
            年度：
            <Picker mode='date' fields='year' value={this.state.date} onChange={this.onTimeChange.bind(this)}>
              <View className='picker main-bg'>
                {this.state.date} <View className='at-icon at-icon-chevron-down iconStyle'></View>
              </View>
            </Picker>
          </View>

          <AtList className='list'>
            {
              <AtListItem title={`2020年1月社保`} onClick={() => this.turnToDetail({a: 'a'})} arrow='right' />
            }
          </AtList>

        </View>
      )
    }else {
      return (
        <AtModal isOpened={this.state.modalIsOpened}>
        <AtModalHeader>二级密码校验</AtModalHeader>
        <AtModalContent>
          <View style='border-bottom: #e0e0e0 solid 1pt; padding-top: 10pt'>
            <Input style='height: 20pt; margin-top: 15pt' type='text' onInput={this.setTowPassword} password={true} placeholder='请输入二级密码' focus/>
          </View>
        </AtModalContent>
        <AtModalAction>
          <Button onClick={this.handleClose}>取消</Button>
          <Button onClick={this.handleConfirm.bind(this)}>确定</Button>
        </AtModalAction>
      </AtModal>
      )
    }
  }
}
